<template>
<div class="content-big">
  <div class="content-left">
    <div class="title">筛选</div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-position="top" label-width="130px" class="">
      <el-form-item label="搜索" prop="userName2">
        <div class="search">
          <el-input v-model="queryParams.userName1" placeholder="搜索敏感词" clearable/>
          <el-button icon="el-icon-search" size="small"></el-button>
        </div>
      </el-form-item>
      <el-form-item label="状态" prop="userName2" >
        <el-radio-group v-model="queryParams.type" class="launchType">
          <el-radio v-for="(item,index) in typeList" :key="index" :label="Number(item.value)">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="企微号分组" prop="userName2" >
        <el-select v-model="queryParams.userName2" filterable placeholder="请选择分组">
          <el-option
            v-for="item in groupList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属企微号" prop="userName2">
        <WeChat
            :options="options"
            @getValue="getValue"
            inputWidth="230px"
            :placeholder="`全部企微号`"
        ></WeChat>
      </el-form-item>
      <el-form-item label="敏感词分组" prop="userName2">
        <el-select v-model="queryParams.userName2" size="small" filterable placeholder="敏感词分组">
          <el-option
            v-for="item in userList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item  label="触发时间" prop="userName3">
        <el-date-picker
          v-model="dateRange1"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="daterange"
          range-separator="-"
          size="small"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        ></el-date-picker>
      </el-form-item>
    </el-form>
  </div>
  <div class="content-right">
    <div class="title">违规记录</div>
    <ul class="content-ul">
      <li>
        <div class="li-top">
          <div class="li-top-left">
            <div class="time">时间：<span>2021-09-11</span></div>
            <div class="code">企微号：<span>民雨薇</span></div>
          </div>
          <div class="li-top-right">
            <el-button class="type">未处理</el-button>
            <el-button v-hasPermi="['system:sensitive:handle']" class="deal">
              <i class="el-icon-check"></i>
            </el-button>
            <el-button v-hasPermi="['system:sensitive:record']" class="chatHistory">聊天记录</el-button>
            <el-button v-hasPermi="['system:sensitive:gochat']" class="chatHistory">前往会话</el-button>
          </div>
        </div>
        <div class="li-bottom">
          <div class="li-bottom-left">
            <div class="right-title">敏感词</div>
            <div class="label-list">
              <span>毒品</span>
              <span>p2p</span>
            </div>
          </div>
          <div class="li-bottom-center">
            <div class="right-title">涉及内容</div>
             <div class="right-content">友友，给我一个科技上网的方案,<span>vnp</span></div>
          </div>
          <div class="li-bottom-right">
            <div class="right-title">涉及对象</div>
            <div class="user-list">
              <div class="item-li">
                <img src="@/assets/images/profile.jpg"/>
                <span>人生若如初见</span>
              </div>

            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="li-top">
          <div class="li-top-left">
            <div class="time">时间：<span>2021-09-11</span></div>
            <div class="code">企微号：<span>民雨薇</span></div>
          </div>
          <div class="li-top-right">
            <el-button class="type">未处理</el-button>
            <el-button class="deal">
              <i class="el-icon-check"></i>
            </el-button>
            <el-button class="chatHistory">聊天记录</el-button>
          </div>
        </div>
        <div class="li-bottom">
          <div class="li-bottom-left">
            <div class="right-title">敏感词</div>
            <div class="label-list">
              <span>毒品</span>
              <span>p2p</span>
            </div>
          </div>
          <div class="li-bottom-center">
            <div class="right-title">涉及内容</div>
            <div class="right-content">友友，给我一个科技上网的方案,<span>vnp</span></div>
          </div>
          <div class="li-bottom-right">
            <div class="right-title">涉及对象</div>
            <div class="user-list">
              <div class="item-li">
                <img src="@/assets/images/profile.jpg"/>
                <span>人生若如初见</span>
              </div>

            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>
</template>
<script>
import WeChat from "@/views/components/WeChat.vue";

export default {
  name: "sensitiveControlList",
  components: {WeChat},
  data(){
    return{
      dateRange1:[],
      queryParams:{},
      groupList: [
        //企微号分组
        {value: 1, label: "技术组"},
        {value: 2, label: "行政组"},
      ],
      userList:[
        {value: 1, label: "技术组"},
        {value: 2, label: "行政组"},
      ],
      options: [{
        value: 1,
        label: '小红',
        WeChatNum: 2,
        WeChatName: '智行',
      }, {
        value: 2,
        label: '小军',
        WeChatNum: 1,
        WeChatName: '锐行',
      }, {
        value: 3,
        label: '小李',
        WeChatNum: 1,
        WeChatName: '锐行',
      }],
      typeList: [
        {value: 1, label: "全部"},
        {value: 2, label: "已处理"},
        {value: 3, label: "未处理"},
      ],
    }
  },
  methods:{
    getValue(obj) {
      console.log('获取行', obj);
    },
  },
}
</script>

<style scoped lang="scss">
.content-big {
  display: flex;
  height: calc(100vh - 100px);
  .content-left {
    width: 260px;
    background-color: #fff;
    margin-right: 12px;
    border: 1px solid #e9e9e9;
  }
  .content-right{
    position: relative;
    flex: 1 1;
    background-color: #fff;
    border: 1px solid #e9e9e9;
  }
}
.title {
  height: 50px;
  border-bottom: 1px solid #e9e9e9;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  font-size: 14px;
}
.search {
  display: flex;

  ::v-deep.el-input__inner {
    border-right: none !important;
    border-radius: 4px 0px 0px 0px;
  }

  ::v-deep .el-button--default {
    border-radius: 0px 4px 4px 0px;
    padding: 0px 10px;
  }
}
.el-form {
  padding: 0px 10px;
  .el-form-item {
    margin-bottom: 10px;
   ::v-deep .el-form-item__label {
      padding-bottom: 0px;
    }
  }
}
::v-deep .el-date-editor {
  width: 230px !important;
  .el-range-input {
    width: 90px;
  }
}
.el-select {
  width: 230px !important;
}
.el-radio-group {
  display: flex;
  ::v-deep .el-radio {
    height: 32px;
    display: flex;
    padding: 0px 15px;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    border: 1px solid #eee;
    &.is-checked {
      border-color: #3b74ff;
    }
    .el-radio__label {
      padding-left: 0px;
    }
  }
 ::v-deep .el-radio__inner {
    display: none;
  }
}
.content-ul {
  margin: 0px 20px;
  padding-top: 10px;
  li {
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    margin-bottom: 10px;
    .li-top {
      display: flex;
      justify-content: space-between;
      height: 45px;
      background:#f7f7f7;
      padding: 0px 15px;
      .li-top-left {
        display: flex;
        align-items: center;
        .time {
          margin-right: 10px;
        }

      }
      .li-top-right {
        display: flex;
        align-items: center;
        .type {
          margin-right: 10px;
          border: 1px solid #eee;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          padding: 0px 10px;
          border-radius: 5px;
        }
        .deal {
          border: 1px solid #eee;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          padding: 0px 10px;
          border-radius: 5px;
          margin: 0px 5px;
        }
        .chatHistory {
          border: 1px solid #eee;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          padding: 0px 10px;
          border-radius: 5px;
        }
      }
    }
    .li-bottom {
      display: flex;
      justify-content: space-between;
      padding-bottom: 10px;
    }
   .li-bottom-left{
     width: 30%;
   .right-tile {
     color: #8C8C8C;
   }
   }
    .label-list {
      display: flex;
      flex-wrap: wrap;
      margin-left: 10px;
      span {
        padding: 0px 10px;
        height: 25px;
        font-size: 12px;
        border: 1px solid #eee;
        display: flex;
        align-items: center;
        margin-right: 5px;
      }
    }
    .li-bottom-center{
      width: 30%;
      position: relative;
      &:after {
        position: absolute;
        content: '';
        left: 0px;
        border-left: 1px solid #eee;
        top:0px;
        bottom: -10px;
      }
      &:before{
        position: absolute;
        content: '';
        right: 0px;
        border-right: 1px solid #eee;
        top:0px;
        bottom: -10px;
      }
    }
    .li-bottom-right{
      width: 40%;
      .user-list {
        display: flex;
        align-items: center;
        margin-left: 10px;
        li {
          display: flex;

        }
        img{
          width: 30px;
          height: 30px;
          border-radius: 5px;
          margin-right: 10px;
        }
      }
    }
  }
}
.right-title {
  height: 40px;
  display: flex;
  align-items: center;
  margin-left: 10px;
  color: #888;
}
.item-li {
  display: flex;
  align-items: center;
  margin-right: 10px;
}
.right-content {
  margin-left: 10px;
  span {
    background: #efdcd5;
    padding: 0px 5px;
  }

}
</style>
